<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">



</head>
<body>

<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div>
        <div class="my-3 p-4 rounded bg-white" style="position: relative;">
            <a style="position:absolute;top:18px;right:28px;" href="/blog-home" class="btn btn-sm btn-primary text-white">返回</a>
            <h4 class="border-bottom border-dark pb-2"><i class="fa fa-bookmark"></i>已收藏文章</h4>
            <div id="starBlogs" class="card-columns"></div>
        </div>
        <div id="pagenav"></div>
    </div>
</div>
<div class="p-4"></div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
function cancelStarBlog(ele) {
    var blogId = $(ele).attr("data-blogId");
    $.ajax({
        url:'/cancelStarBlog/'+blogId,
        type:'GET',
        success: function (result) {
            if (result.code === 100) {
                //删除该div
                $("div[data-flag-div-blogId=" + blogId + "]").remove();
                toastr.success("操作成功");
            }else{
                toastr.error(result.extend.error);
            }
        }
    })
}

//获取HTML中的图片地址
function getimgsrc(htmlstr) {
    var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim;
    var imgsrcArr = [];
    while (tem = reg.exec(htmlstr)) {
        imgsrcArr.push(tem[2]);
    }
    return imgsrcArr;
}

//过滤html标签
function delHtmlTag(str) {
    return str.replace(/<[^>]+>/g, "");//去掉所有的html标记
}

function buildPage(result) {
    var $starBlogs = $("#starBlogs");
    $starBlogs.empty();
    $.each(result.extend.pageInfo.list,function (index,item) {
        if(item.blog){
            var div_card = $("<div data-flag-div-blogId='"+item.blog.id+"' class='card'></div>");
            //判断该博客中是否包含图片
            var imgsrc = getimgsrc(item.blog.blogcontent);
            if (imgsrc.length>0) {
                //alert(imgsrc[0]);
                //图片存在，card中插入图片
                div_card.append($("<img class='card-img-top' alt='博客封面' src='"+imgsrc[0]+"' data-holder-rendered='true'/>"));
            }
            var div_body = $("<div class='card-body'>");
            var h5 = $("<h5 class='card-title'><a class='text-dark' href='/blog/"+item.blog.id+"'>" + item.blog.blogtitle + "</a></h5>");
            //内容截取，并去掉HTML标签
            var content = item.blog.blogcontent;
            content = delHtmlTag(content);
            content = content.substr(0, 200);
            var p = $("<p class='card-text'>"+content+"</p>");
            var p_small = $("<p class='card-text'><small class='text-muted'>"+new Date(item.blog.edittime).toLocaleString()+"</small></p>");
            //取消收藏按钮
            var $btn_cancelStar = $("<a data-blogId='"+item.blog.id+"' onclick='cancelStarBlog(this)' class='btn btn-sm btn-danger text-white'>取消收藏</a>");
            //开始封装
            div_card.append(div_body.append(h5).append(p).append(p_small).append($btn_cancelStar)).appendTo($starBlogs);
        }
    });
}

function buildPage_pagenav(result) {
    var $pagenav = $("#pagenav");
    $pagenav.empty();
    var div = $("<div class='p-2'>");
    var ul = $("<ul></ul>").addClass("pagination");
    //遍历给ul中添加页码提示
    $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

        var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
        if(result.extend.pageInfo.pageNum === item){
            //当前页按钮，不可点击
            numLi.find("a").removeClass("btn-outline-primary");
            numLi.find("a").addClass("disabled");
            numLi.find("a").addClass("btn-primary");
        }
        numLi.click(function(){
            toPage(item);
        });
        ul.append(numLi);
    });
    div.append(ul).appendTo($pagenav);
}
function toPage(pn) {
    $.ajax({
        url:'/getUserStarBlogs/'+pn,
        type:'GET',
        success:function (result) {
            if (result.code === 100) {
                buildPage(result);
                buildPage_pagenav(result);
            }else{
                toastr.error(result.extend.error);
            }
        }
    });
}

$(function () {
    toPage(1);
});
</script>
</body>
</html>
